import '../public/index'
import url from '../data/url'
import request from '../data/request'
import {tableConfig,header} from '../data/config'
import store from 'store'

const base                  = url.base,
      getOnePCMonitor       = request.getOnePCMonitor,
      OnePCMonitorPublish   = request.OnePCMonitorPublish,
      OnePCMonitorStatus    = request.OnePCMonitorStatus;

let table,
    storeData

// 初始化表格
table = $('#table').bootstrapTable($.extend({}, tableConfig, {
  url: base + getOnePCMonitor,
  queryParams: function (params) {
    return $.extend({
        currentPage: params.pageNumber,
        pageSize: params.pageSize
      },
      $('#searchForm').serializeObject())
  },
  columns: [
    {
      field: 'deviceName',
      title: '设备名称',
      valign: 'middle'
    }, {
      field: 'buildingName',
      title: '楼盘名称',
      valign: 'middle'
    }, {
      field: 'status',
      title: '网络状态',
      valign: 'middle',
      formatter: (index, row) => {
        switch (index) {
          case '1':
            return '正常'
            break;
          case '0':
            return '异常'
            break;
        }
      }
    }, {
      field: 'lastUpdateTime',
      title: '网络最后更新时间',
      valign: 'middle',
      formatter: (index, row) => {
        return moment(index).format('YYYY-MM-DD hh:mm:ss')
      }
    }, {
      field: 'flag',
      title: '监控开关',
      valign: 'middle',
      formatter: (index, row) => {
        switch (index) {
          case '1':
            return '开启'
            break;
          case '2':
            return '暂停'
            break;
          case '3':
            return '关闭'
            break;
        }
      }
    }, {
      field: 'publishMode',
      title: '是否发布',
      valign: 'middle',
      formatter: (index, row) => {
        switch (index) {
          case '1':
            return '是'
            break;
          case '0':
            return '否'
            break;
        }
      }
    }, {
      field: 'isSendMsg',
      title: '是否发送预警短信',
      valign: 'middle',
      formatter: (index, row) => {
        switch (index) {
          case '1':
            return '发送'
            break;
          case '0':
            return '不发送'
            break;
        }
      }
    }, {
      field: 'remark',
      title: '备注',
      valign: 'middle'
    }, {
      field: 'action',
      valign: 'middle',
      align: 'center',
      title: '操作',
      formatter: function (index, row) {

        return `<div class="btn-group">
                  <button type="button" data-id="${ row.idStr }" class="btn btn-default btn-detail">详情</button>
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu pull-right">
                    <li>
                      <a data-id="${ row.idStr }" class="btn-modify" href="#">修改</a>
                    </li>
                    <li>
                      <a data-id="${ row.idStr }" class="btn-convert btn-check" href="#">检测状态</a>
                    </li>
                    <li>
                      <a data-id="${ row.idStr }" class="btn-convert btn-reset" href="#">重新发布</a>
                    </li>
                  </ul>
                </div>`
      }
    }]
}))

// 点击列表的时候传递数据到全局变量
table.on('click-row.bs.table', (e, data, el) => {
  storeData = data
})

// 搜索
$('#search-btn').on('click', (e) => {
  e.preventDefault();

  table.bootstrapTable('refresh', {
    query: $.extend({
      currentPage : 1,
    }, $('#searchForm').serializeObject())
  })
})

// 状态搜索
$("input[name = 'status']").on('change', (e) => {
  e.preventDefault();

  table.bootstrapTable('refresh', {
    query: $.extend({}, $('#searchForm').serializeObject())
  })
})

//监控开关搜索
$("input[name = 'flag']").on('change', (e) => {
  e.preventDefault();

  table.bootstrapTable('refresh', {
    query: $.extend({}, $('#searchForm').serializeObject())
  })
})

// 重新发布
$(document).on('click', '#table .btn-reset', (e) => {
  e.preventDefault()

  console.log('重新发布一体机')

  let id = $(e.target).attr('data-id'),
    data = {id: id};

  bootbox.confirm({
    title: '提示',
    message: `<div>
                <h3 style="margin:.75em 0">是否重新发布一体机？</h3>
              </div>`,
    buttons: {
      cancel: {
        label: '取消'
      },
      confirm: {
        label: '确认'
      }
    },
    callback: (result) => {

      if (!result) {
        return
      }

      let loading_modal = layer.msg('提交中...', {
        icon: 16,
        time: 0
      })

      $.ajax({
        headers: header,
        url: base + OnePCMonitorPublish,
        type: 'POST',
        data: data
      })
        .done(function (res) {
          console.log(res)

          if (res.code == 0) {

            layer.msg('发布成功', {
              icon: 6
            })

            table.bootstrapTable('refresh')

          } else {
            layer.msg( res.msg, {
              icon: 5
            })
          }

        })
        .fail(function (res) {
          console.log(res)

          layer.msg('发布失败', {
            icon: 5
          })

        })
        .always(function (res) {

          console.log("complete")

          layer.close(loading_modal)
        })
    }
  })
})

// 检测状态
$(document).on('click', '#table .btn-check', (e) => {
  e.preventDefault()

  console.log('检测状态')

  let id = $(e.target).attr('data-id'),
    data = {id: id};
  $.ajax({
    headers: header,
    url: base + OnePCMonitorStatus,
    type: 'POST',
    data: data
  })
    .done(function (res) {
      console.log(res)

    bootbox.alert(`<h3>${res.msg}</h3>`)

    })
    .fail(function (res) {
      console.log(res)

      layer.msg('获取失败', {
        icon: 5
      })

    })
    .always(function (res) {

      console.log("complete")

    })
})

//跳转至修改页
$(document).on('click', '#table .btn-modify', (e) => {
  e.preventDefault()

  console.log('详情')
  store.set('storeData', storeData)

  let id = $(e.target).attr('data-id')
  window.location.href = `./modify.html?id=${id}`
})

//跳转至详情页
$(document).on('click', '#table .btn-detail', (e) => {
  e.preventDefault()

  console.log('详情')
  store.set('storeData', storeData)

  let id = $(e.target).attr('data-id')
  window.location.href = `./detail.html?id=${id}`
})